<script>
import axios from "axios";

export default {
  name: "topStep",
  props: {
    // menuSelect: {
    //   type: String,
    //   default: ''
    // },
  },
  data() {
    return {
      topData: [],
      params:{},
      menuSelect: "0",
      saisId:'',
      rowId:'',
      topStepId:'',
      saisIdData:[],
      saisIdCurrentData:[]
    };
  },
  mounted() {
    this.params = this.$route.query
    this.topStepId =  localStorage.getItem("topStepId");
  },
  inject: ["imageUrl", "serviceUrl"],
  methods: {
    getValuesBefore(value) {
      console.log(value,'value');
      return this.saisIdData.slice(0, this.saisIdData.indexOf(value));
    },
    findPreviousItem(id) {
      const index = this.saisIdData.findIndex(item => item.id === id);
      return index > 0 ? this.saisIdData[index - 1] : null;
    },
    getList(params) {
      this.saisIdData = []
      let that = this
      axios
        .get(that.serviceUrl + "/saisjc2/cdba2Saisjc/list", {
          headers: {
            "X-Access-Token": localStorage.getItem("token"),
          },
          params: {
            ...params,
            _t: new Date().getTime(),
          },
        })
        .then((resp) => {
          that.topData = resp.data.result.records;
          that.topData.forEach(item=>{
            that.saisIdData.push(item.id)
          })
          const index = that.saisIdData.indexOf(this.topStepId); // 找到元素 3 的索引位置
          if (index !== -1) {
            this.saisIdCurrentData = that.saisIdData.slice(0, index+1); // 使用 slice 方法截取索引 0 到索引 index 之间的元素（不包括索引 index 对应的元素）
          }

          that.topData = that.topData.map(item=>{
            return {...item,focus:this.saisIdCurrentData.indexOf(item.id)==-1?false:true}
          })
          console.log(that.topData,'******************',this.saisIdCurrentData);

          resp.data.result.records.forEach((element, index) => {
            if (element.id == params.saisjc) that.menuSelect = index;
          });
        })
        .catch((error) => {
          //console.log(error);
        });
    },

    menuChange(item, index) {
      // this.menuSelect = index;
    },
  },
};
</script>

<template>
  <ul class="menu-top pos-rel clearfix">
    <span
      class="point-pub pos-abs left"
      :class="{ focus: menuSelect == 0 }"
    ></span>
    <span
      class="point-pub pos-abs right"
      :class="{ focus: menuSelect == topData.length - 1 }"
    ></span>
    <li
      class="fxl pos-rel"
      :class="{ focus: item.focus }"
      :style="{ width: `${(100 / topData.length).toFixed(0)}%` }"
      v-for="(item, index) in topData"
      @click="menuChange(item, index)"
      :key="index"
    >
      <p
        class="iconfont pos-rel icon"
        :class="{ 'icon-tijiao': index == 0, 'icon-jiangbei1': index != 0 }"
      ></p>
      <p class="name">{{ item.jincmc }}</p>
    </li>
  </ul>
</template>

<style scoped lang="less"></style>
